import { FC } from "react"
import { Box, useTheme } from "@mui/material"
import { SxProps } from "@mui/system"

interface ITTageProps {
  title: string
  type: "text" | "outlined" | "contained"
  color?: string
  sx?: SxProps
}

const TTag: FC<ITTageProps> = (props) => {
  const theme = useTheme()
  const { title, color = theme.palette.primary.main, type, sx } = props
  const isOutlined = type === "outlined"

  return (
    <Box
      sx={{
        display: "inline-block",
        borderRadius: "100px",
        border: isOutlined ? `1px solid ${color}` : "1px solid transparent",
        padding: "1px 8px !important",
        fontSize: "12px",
        color: isOutlined ? color : "#fff",
        backgroundColor: isOutlined ? "transparent" : color,
        ...sx
      }}
    >
      {title}
    </Box>
  )
}
export default TTag
